<!-- App.vue 是整个 Vue 项目的“根组件”，它就像是一个“外壳”或“容器”，负责把整个应用包起来。你可以把它当成网页的 <body>，所有的页面、组件、内容，最终都会渲染在这个组件里。 -->
<template>
    <!-- 全局导航栏，显示在页面顶部 -->
    <AppNavbar />

    <!-- 路由占位符：用来显示不同页面的内容（根据路由变化显示对应组件） -->
    <router-view />

    <!-- 全局 Toast 弹窗组件，用于显示提示信息 -->
    <Toast ref="toastRef" />
</template>

<script setup>
import AppNavbar from './components/AppNavbar.vue'; // 导入全局导航栏组件
import { useThemeStore } from './store/theme'; // 导入主题管理 store，用于初始化亮/暗模式
import { ref, provide, onMounted } from 'vue'; // 引入 Vue 的基础 API
import Toast from './components/Toast.vue'; // 导入自定义的 Toast 组件

// 初始化主题（每次用户打开页面都会执行一次）
useThemeStore().initTheme();

// 创建一个 ref 引用，用来拿到 Toast 组件的实例
const toastRef = ref(null);

// 使用 provide 注入 toastRef，使项目里的任意组件都可以通过 inject('toast') 拿到它
provide('toast', toastRef);

// 当组件挂载完毕后，检查 Toast 是否成功挂载（防止挂载失败导致功能失效）
onMounted(() => {
    if (!toastRef.value) {
        console.error('Toast 组件没挂载成功'); // 如果失败，就打印错误信息
    }
});
</script>
